<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
	<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
    <head>
           <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
	<head>
<![endif]>
    <title>Gradient: Columns #1</title>
	<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="isDebug: true"></script>
    <script>
		dojo.require("dojox.charting.Chart");
        dojo.require("dojox.charting.axis2d.Default");
        dojo.require("dojox.charting.plot2d.Columns");
        dojo.require("dojox.charting.plot2d.ClusteredColumns");
        dojo.require("dojox.charting.plot2d.StackedColumns");
		dojo.require("dojox.charting.Theme");

        run = function(){
            dojo.attr("start", "disabled", true);
            
            var theme1 = new dojox.charting.Theme({
                    seriesThemes: [
                        {
                            fill: {
                                type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 0,
                                colors: [{ offset: 0, color: "#ed0" }, { offset: 0.5, color: "#eda" }, { offset: 1, color: "#ed0" }]
                            }
                        },
                        {
                            fill: {
                                type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 0,
                                colors: [{ offset: 0, color: "#e00" }, { offset: 0.5, color: "#eaa" }, { offset: 1, color: "#e00" }]
                            }
                        },
                        {
                            fill: {
                                type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 0,
                                colors: [{ offset: 0, color: "#0e0" }, { offset: 0.5, color: "#aea" }, { offset: 1, color: "#0e0" }]
                            }
                        },
                        {
                            fill: {
                                type: "linear", space: "plot", x1: 0, y1: 0, x2: 100, y2: 0,
                                colors: [{ offset: 0, color: "#00e" }, { offset: 0.5, color: "#aae" }, { offset: 1, color: "#00e" }]
                            }
                        }
                    ]
                });

            var chart1 = new dojox.charting.Chart("c1").
                setTheme(theme1).
                addAxis("x", {fixLower: "major", fixUpper: "major", natural: true}).
                addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true,  minorTickStep: 0.5}).
                addPlot("default", {type: "Columns"}).
                addSeries("Series A", [1, 2, 3, 4, 5]).
                addSeries("Series B", [5, 4, 3, 2, 1]).
                render();

            var chart2 = new dojox.charting.Chart("c2").
                setTheme(theme1).
                addAxis("x", {fixLower: "major", fixUpper: "major", natural: true}).
                addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true,  minorTickStep: 0.5}).
                addPlot("default", {type: "StackedColumns"}).
                addSeries("Series A", [2, 3, 3, 3, 5]).
                addSeries("Series B", [1, 4, 5, 2, 1]).
                addSeries("Series C", [2, 1, 2, 1, 3]).
                render();

            var chart3 = new dojox.charting.Chart("c3").
                setTheme(theme1).
                addAxis("x", {fixLower: "major", fixUpper: "major", natural: true}).
                addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true,  minorTickStep: 0.5}).
                addPlot("default", {type: "ClusteredColumns", gap: 5}).
                addSeries("Series A", [2, 3, 3, 3, 5]).
                addSeries("Series B", [1, 4, 5, 2, 1]).
                addSeries("Series C", [2, 1, 2, 1, 3]).
                render();
        };
        
        dojo.addOnLoad(run);
    </script>
</head>
<body>
    <p><button id="start" onclick="run();">Start!</button></p>
	<h1>plot-space left-to-right gradient</h1>
	<p>Columns</p>
    <div id="c1" style="position: relative; width: 600px; height: 400px;"></div>
	<p>Stacked Columns</p>
    <div id="c2" style="position: relative; width: 600px; height: 400px;"></div>
	<p>Clustered Columns</p>
    <div id="c3" style="position: relative; width: 600px; height: 400px;"></div>
</body>
</html>
